<template>
  <div class="personal-center">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div class="header-img">
            <img src="../../assets/images/Bia.png" alt />
          </div>
          <h3 class="name">Serati Ma</h3>
          <p class="jiesao">海纳百川，有容乃大</p>
          <div class="introduce-news">
            <div>
              <span class="el-icon-s-promotion"></span>
              <span class="grey">那是一种内在的东西， 他们到达不了，也无法触及的</span>
            </div>
            <div>
              <span class="el-icon-coordinate"></span>
              <span class="grey">希望是一个好东西，也许是最好的，好东西是不会消亡的</span>
            </div>
            <div>
              <span class="el-icon-paperclip"></span>
              <span class="grey">又到草黄时节。遍野的绿色斑驳着消失，只有那干枯的浅黄渐次布满了人的视线，是生命终结时最柔韧的余唱。</span>
            </div>
          </div>
          <div class="label-essay">
            <h3>标签</h3>
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >{{tag}}</el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            ></el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>
          </div>
          <div class="label-essay">
            <h3>介绍</h3>
            <div class="demo-fit">
              <div class="block" v-for="fit in fits" :key="fit">
                <span class="title">{{ fit }}</span>
                <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card" v-loading="myLoading">
          <div class="clearfix">
            <span>文章：</span>
          </div>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item
              v-for="(item,index) in dataList"
              :key="index"
              :title="item.name"
              :name="index"
            >
              <div v-text="item.content"></div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Vue from "vue";
import { getHome } from "@/api/getData";
import { Tag, Card, Avatar, Collapse, CollapseItem } from "element-ui";
Vue.use(Tag);
Vue.use(Card);
Vue.use(Avatar);
Vue.use(Collapse);
Vue.use(CollapseItem);
export default {
  name: "PersonalCenter",
  data() {
    return {
      myLoading: false,
      dataList: [],
      activeNames: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
      dynamicTags: ["有想法", "专注", "大长腿", "海纳百川"],
      inputVisible: false,
      inputValue: "",
      fits: ["中二少女团", "全组都是吴彦祖", "程序员日常", "高逼格设计天团", "就知道泡妞","中二少年"],
      url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      try {
        this.myLoading = true;
        const res = await getHome();
        const data = res.data
        this.dataList = data.mymsg;
        this.myLoading = false;
      } catch (error) {
        console.log(error);
      }
    },
    handleChange(val) {
      console.log(val);
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./less/personal-center.less");
</style>